<template>
  <!-- Column() {}    Scroll() {}     微信(鸿蒙版-全端)    -->
  <scroll-view>
    <view class="archive-page">
      <uni-forms :model="formData" :rules="rules" border label-width="220rpx" ref="formRef">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            v-model="formData.name"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            v-model="formData.idCard"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="name">
          <view class="uni-switch">
            <switch
              :checked="formData.defaultFlag === 1"
              color="#20c6b2"
              style="transform: scale(0.7)"
              @change="formData.defaultFlag = formData.defaultFlag === 1 ? 0 : 1"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="submit">保存</button>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
  import { addPatientApi } from '@/apis/patient'
  import { ref } from 'vue'

  const formData = ref({
    name: '',
    idCard: '',
    defaultFlag: 0, // 默认患者1    非默认0
    gender: 1, //  男1   女0
  })

  const rules = {
    // 对name字段进行必填验证
    name: {
      rules: [
        {
          required: true,
          errorMessage: '姓名不能为空',
        },
        {
          pattern: /^[\u4e00-\u9fa5]{2,5}$/,
          errorMessage: '姓名必须是汉字2-5',
        },
      ],
    },
    // 对email字段进行必填验证
    idCard: {
      rules: [
        {
          required: true,
          errorMessage: '身份证不能为空',
        },
        {
          pattern:
            /^[1-9]\d{5}(18|19|(\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          errorMessage: '请输入正确的身份证',
        },
      ],
    },

    // 性别校验
    gender: {
      // 规则
      rules: [
        // 第一个规则: 必须和身份证号统一
        // 自定义校验
        {
          // 直接提供一个validateFunction函数
          // 安装类型包
          // @ts-ignore
          validateFunction: function (rule, value, data, callback) {
            // 如果你想让这个结果通过  return true
            // 失败    callback('错误提示')
            // if (value.length < 2) {
            //   callback('请至少勾选两个兴趣爱好')
            // }
            // return true
            // rule 规则
            // value 当前选中的性别
            // data  整个bd数据
            // callback  失败时需要调用的函数
            // console.log(value, data)
            const g = data.idCard.slice(16, 17) // 倒数第二位 字符串
            if (Number(g) % 2 !== value) {
              callback('身份证性别和选中的性别不匹配')
            }
            return true
          },
        },
      ],
    },
  }

  // 添加引用
  const formRef = ref() // formRef.value = 组件

  const submit = async () => {
    try {
      // 数据验证
      await formRef.value!.validate()
      console.log('通过的逻辑')

      // 新增患者请求
      await addPatientApi(formData.value)
      // 提示
      uni.showToast({
        title: '新增成功',
        icon: 'none',
      })
      uni.navigateBack() // 返回上一页
    } catch (err) {
      console.log('失败的逻辑', err)
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
